﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Content.Master" Inherits="System.Web.Mvc.ViewPage<MethodWorx.CMS.UI.Models.EditContentModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <style>
            .contentItem
            {
                padding:2px;
                margin:2px;
                cursor:pointer;
                border:1px solid transparent;
            }
            
            .contentItemDeleted
            {
                padding:2px;
                margin:2px;
                border:1px solid transparent;
            }
            
            .contentItem.selected
            {
                background-color:#BEEBFF;
                border:1px solid #99DEFD;
            }
            
            
            .contentItem:hover
            {
                background-color:#D8F0FA;
                border:1px solid #B6D0D9
            }
            
            .contentItem.selected:hover
            {
                background-color:#BEEBFF;
                border:1px solid #99DEFD;
            }
    </style>

    <script language="javascript">
        var expanded = true;
        var selected = false;
        $(document).ready(function () {

            var buttons = new Array();

            buttons.push({ text: "Refresh", hasText: false, id: "refresh", icon: "<%=Url.Content("~/images/icons/arrow_refresh.png")%>" });
            buttons.push({ text: "Add Content", hasText: false, id: "add", icon: "<%=Url.Content("~/images/icons/content_add.png")%>" });
            buttons.push({ text: "Delete Content", hasText: false, id: "delete", icon: "<%=Url.Content("~/images/icons/content_delete.png")%>" });
            buttons.push({ text: "Rename Content", hasText: false, id: "rename", icon: "<%=Url.Content("~/images/icons/textfield_rename.png")%>" });
            
            MethodWorx.CMS.Toolbar.setButtons(buttons, "#toolbar");

            //$("#contentContainer").resizable({ handles: 's' });

            $(window).resize(function () {
                resize();
            });
            resize();

            /*$( "#sortable" ).sortable(
            {
                stop : function(event, ui) 
                { 
                    debugger;
                   /* var ar = new Array();
                    $("#sortable div").each(function()
                    {
                        if($(this).attr("contentItemId") != null)
                            ar.push($(this).attr("contentItemId"));
                    });

                    $.getJSON("<%=Url.Content("~/Application")%>/ContentItem/Resequence?page=<%=Model.Page.Id %>", { sequence: ar }, function () {
                        MethodWorx.CMS.hidePleaseWait();

                    }, function () {
                        MethodWorx.CMS.hidePleaseWait();
                        alert("Unexpected error");
                    });
                }
            });*/
		$( "#sortable" ).disableSelection();

            $(".contentItem").click(function (e) {
                if (!e.ctrlKey) {
                    MethodWorx.CMS.showPleaseWait();
                    $(".contentItem").removeClass("selected");
                }
                $(this).addClass("selected");
                selected = true;
                $("#contentPropertiesFrame").attr("src", "<%=Url.Content("~/Content")%>/EditContentItem/" + $(this).attr("contentItemId") + "?pageId=<%=this.ViewData.Model.Page.Id %>");
            });
            /*
            $("#showHideContainer").click(function () {
            expanded = !expanded;
            if (!expanded) {
            $("#contentContainer").slideUp();
            $("#showHideContainer").text("(show)");
            }
            else
            {
            $("#contentContainer").slideDown();
            $("#showHideContainer").text("(hide)");
            }

            });*/

            $("#delete").click(function () {
                var message;
                if ($(".contentItem.selected").length == 1)
                    message = "Are you sure you want to delete this content item?";
                if ($(".contentItem.selected").length == 0) {
                    alert("Please select at least 1 content item to delete");
                    return;
                }
                else
                    message = "Are you sure you want to delete these content items?";
                if (confirm(message)) {
                    MethodWorx.CMS.showPleaseWait();
                    $(".contentItem.selected").each(function () {
                        $.getJSON("<%=Url.Content("~/Content")%>/DeleteContentItem/" + $(this).attr("contentItemId"), function () {
                            MethodWorx.CMS.hidePleaseWait();
                            $(this).removeClass("contentItem");
                            $(this).addClass("contentItemDeleted");
                        }, function () {
                            MethodWorx.CMS.showPleaseWait();
                            alert("Unexpected error");
                        });
                    });
                }
            });

            $("#rename").click(function()
            {
                window.parent.parent.openDialog("<%=Url.Content("~/Application")%>/ContentItem/Rename?contentItem=" + $(".contentItem.selected").attr("contentItemId"), "Rename Content Item", function(action)
                {
                    if(action == "ok")
                    {
                        window.location.href =
                        window.location.href;
                    }
                });
            });

            $("#add").click(function()
            {
                window.parent.parent.openDialog("<%=Url.Content("~/Application")%>/CreateContentItem/ChooseContentTemplate/<%=this.Model.Page.Id %>", "Create Content", function(action)
                {
                    if(action == "ok")
                    {
                        window.location.href =
                        window.location.href;
                    }
                });
            });

            $("#refresh").click(function () {
                window.location.href =
                window.location.href;
            });

            $(".contentItem").first().click();
        });

        function save() {
            if (selected) {
                window.frames["contentPropertiesFrame"].save();
            }
        }

        function refreshCode() {
            getCode($("#templates").val());
        }

        function resize() {
            $("#contentContainer").height($(window).height() - 60);
            $("#contentProperties").height($(window).height() - 60);
            $("#contentProperties").width($(window).width() - 235);
        }
    </script>

    <div id="contentContainer"  class="ui-widget-content" style="float:left;width:200px;height:100%;border:1px solid silver;margin-top:10px;">
        <div style="width:100%;height:100%;overflow:auto;" id="sortable">
            <%foreach(var content in this.Model.Page.ChildContent)
              {
                  if (content.Status == MethodWorx.CMS.Content.ContentStatus.AwaitingDelete ||
                      content.Status == MethodWorx.CMS.Content.ContentStatus.PublishedAndAwaitingDelete)
                  {%>
                  <div class="contentItemDeleted" contentItemId="<%=content.Id %>"><img src="<%=Url.Content("~/images")%>/icons/content_awaitingdelete.png" align="absmiddle"/><%=content.Name %></div>
                  <%}else
                  {%>
                  <div class="contentItem" contentItemId="<%=content.Id %>"><img src="<%=Url.Content("~/images")%>/icons/content.png" align="absmiddle"/><%=content.Name %></div>
                  <%
                  }
              }%>
        </div>
    </div>
    <div id="contentProperties" style="width:100%;height:400px;margin-left:10px;border:1px solid silver;margin-top:10px;float:left;">
        <iframe id="contentPropertiesFrame" name="contentPropertiesFrame" style="height:100%;width:100%" style="border:none" frameborder="no">
        </iframe>
    </div>

</asp:Content>
